<template>
  <div class="bg">
    <div class="top">
      <div class="title">销售中的产品</div>
      <div class="promptBox">
        <div class="commonMember" v-if="userInfo.identityType < 3">
          <p>
            您可免费发布{{
              this.pmInfo.countOne
            }}条产品信息，开通优塑会员无限发布，<span @click="openMember"
              >立即开通>></span
            >
          </p>
          <div class="info">
            <div class="box" v-for="(item, index) in memberList" :key="index">
              <div class="num">{{ item.num }}</div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>

        <div class="commonMember" v-else>
          <p>您现可无限发布产品信息</p>
          <div class="info">
            <div class="box" v-for="(item, index) in memberList" :key="index">
              <div class="num">{{ item.num }}</div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="bottom">
        <img
          src="../../assets/bussiness/icon_ysxcp_xg@2x.png"
          class="xgimage"
          alt=""
        />
        <p>
          修改联系人信息自动生成名片，通过分享二维码进入商铺查看你的信息，<span
            @click="$router.replace('./contact')"
            >修改联系人>></span
          >
        </p>
      </div>
    </div>

    <div class="content">
      <div class="nav">
        <div class="left">
          <!-- <el-input
            v-model="input"
            placeholder="搜索品名/厂家/牌号……"
            @keyup.enter.native="inquire"
          ></el-input> -->
          <el-autocomplete
            class="inline-input"
            v-model="input"
            :fetch-suggestions="querySearch"
            placeholder="请输入品名/厂家/牌号……"
            style="width:230px;display:flex;"
            @keyup.enter.native="inquire"
            @select="handleSelect"
          ></el-autocomplete>
        </div>

        <div class="middle">
          <el-form ref="form" label-width="80px">
            <el-form-item label="分类">
              <el-select
                v-model="form.kind"
                placeholder="请选择"
                @change="inquire"
              >
                <el-option
                  v-for="item in floptions"
                  :key="item.value"
                  :label="item.type"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <!-- <el-button @click="getPlasticList">查询</el-button> -->
              <el-button @click="inquire" @keyup.enter="inquire">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="right">
          <div class="batch">
            <div class="large" v-show="showBatch">
              <div
                :class="['batchOfflone', { isRedClass: isRed == true }]"
                @click="showPop(true, 1)"
              >
                <img
                  src="../../assets/bussiness/icon_ysxcp_plxx@2x.png"
                  alt=""
                />批量下线
              </div>
              <div
                :class="['batchUpdate', { isRedClass: isRed == true }]"
                @click="massUpdate"
              >
                <img
                  src="../../assets/bussiness/icon_ysxcp_plgx@2x.png"
                  alt=""
                />批量更新
              </div>
              <div
                :class="['batchDel', { isRedClass: isRed == true }]"
                @click="showPop(true, 0)"
              >
                <img
                  src="../../assets/bussiness/icon_ysxcp_plsc@2x.png"
                  alt=""
                />批量删除
              </div>
            </div>
          </div>
          <button
            class="button"
            v-if="this.showBatch == false"
            @click="batchOperation"
          >
            批量操作
          </button>
          <button class="button" v-else @click="cancel">取消</button>
        </div>
      </div>

      <!-- 列表 -->
      <div class="pushList">
        <div class="apply_table">
          <div class="apply_table_column">
            <div class="checkAll">
              <div v-show="allCheck">
                <input
                  type="checkbox"
                  @click="clickAllItem"
                  v-model="clickAll"
                />全选
              </div>
            </div>
            <div
              class="apply_table_title"
              v-for="(item, index) in tableColumn"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <el-divider></el-divider>

          <div class="result" v-if="tableData.length > 0">
            <div
              class="apply_table_info"
              v-for="(item, index) in tableData"
              :key="index"
              @mouseover="showBtn(index)"
              @mouseout="hideBtn(index)"
            >
              <div class="apply_info_box" :class="{ isGrayClass: item.show }">
                <div class="check">
                  <div v-show="showCheck">
                    <input
                      type="checkbox"
                      @click="check(item)"
                      v-model="item.check"
                    />
                  </div>
                </div>
                <div class="apply_info_text">{{ item.productName }}</div>
                <div class="apply_info_text">{{ item.manufacturersName }}</div>
                <div class="apply_info_text">{{ item.markName }}</div>
                <div class="apply_info_text">
                  <input
                    v-if="item.check"
                    type="text"
                    :class="['input', { isSelect: !item.check }]"
                    :disabled="!item.check"
                    v-model="item.price"
                    @input="changePrice(index, $event)"
                  />
                  <span v-else>{{ item.price }}</span>
                  元/吨<span v-if="item.taxInclusive == 1">/<span style="color: #20C475;">含税</span></span>
                </div>
                <!-- <div class="apply_info_text">
                  {{ item.taxInclusive == 1 ? "是" : "否" }}
                </div> -->
                <div class="apply_info_text">
                  <input
                    v-if="item.check"
                    type="text"
                    :class="['input', { isSelect: !item.check }]"
                    :disabled="!item.check"
                    v-model="item.number"
                    @input="changeNumber(index, $event)"
                  />
                  <span v-else>{{ item.number }}</span>
                  吨
                </div>
                <div class="apply_info_text">
                  {{ item.deliveryType == 1 ? "现货" : "期货" }}
                </div>
                <div class="apply_info_text">{{ item.deliverySiteCity }}</div>
                <div
                  class="apply_info_text"
                  :class="{ isGreenclass: item.isGreen == true }"
                >
                  <!-- {{ item.mistiming | newTimeUpdate }} -->
                  {{ item.mistiming }}
                </div>
                <div class="apply_info_btn">
                  <div v-show="showAllBtn">
                    <div class="showbtn" v-show="item.show">
                      <button
                        class="btn_offline btn"
                        @click="showPop(false, 1, item.id)"
                      >
                        下线
                      </button>
                      <button
                        class="btn_edit btn"
                        @click="goEdit(item.id, false)"
                      >
                        编辑
                      </button>
                      <!-- <button
                        class="btn_update btn"
                        @click="showPop(false, 2, item.id)"
                      > -->
                      <button
                        class="btn_update btn"
                        @click="singleUpdate(index)"
                      >
                        更新
                      </button>
                      <button
                        class="btn_del btn"
                        @click="showPop(false, 0, item.id)"
                      >
                        删除
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <el-divider></el-divider>
            </div>
          </div>

          <div class="noResult" v-else>
            <p>暂无相关数据</p>
            <button class="issueButton" @click="goToIssue">立即发布</button>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        v-if="tableData.length > 0"
      >
      </el-pagination>
    </div>
    <!-- 弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogShow"
      width="5.71rem"
      center
      class="del_dialog"
    >
      <span>{{ hintList[popType] }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogCancel">取消</el-button>
        <el-button type="primary" @click="dialogConfirm">确定</el-button>
      </span>
    </el-dialog>

    <!-- 批量更新弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="updateDialog"
      width="5.71rem"
      center
      class="del_dialog"
    >
      <span>是否确定更新信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdate">取消</el-button>
        <el-button type="primary" @click="sure">确定</el-button>
      </span>
    </el-dialog>

    <!-- 会员开通二维码 -->
    <el-dialog
      title="会员收费二维码"
      :visible.sync="chargeDialog"
      width="5.71rem"
      center
      class="chargeDialog button"
    >
      <img :src="this.codeUrl | urlLoad" class="qrcode" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// import Vue from "vue";
export default {
  data() {
    return {
      form: {
        kind: "",
      },
      showBatch: false,
      level: 0,
      memberList: [],
      tableColumn: [
        "品名",
        "厂家",
        "牌名",
        "价格",
        // "是否含税",
        "数量",
        "交货方式",
        "交货地",
        "更新时间",
        "操作",
      ],
      searchoptions: [],
      floptions: [
        { value: "塑胶原料" },
        { value: "改性塑料" },
        { value: "再生塑料" },
        { value: "塑料助剂" },
        { value: "塑料机械" },
      ],
      // 列表
      tableData: [],
      delDialog: false,
      offDialog: false,
      editDialog: false,
      updateDialog: false,
      input: "",
      clickAll: false,
      chargeDialog: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      index: -1,
      popType: -1, // 弹窗类型
      hintList: ["是否确定删除信息", "是否确定下架信息", "是否确定更新信息"],
      operations: [],
      ids: [],
      dialogShow: false,
      pmInfo: {},
      userInfo: {},
      time: "",
      updateTime: "",
      showCheck: true,
      codeUrl: "",
      showAllBtn: true,
      isRed: false,
      allCheck: true,
      priceObj: {},
      numberObj: {},
      authallpageNo: 1,
      authallstaus: true,
      loading: true,
      showmore: true
    };
  },

  created() {
    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
    this.form.kind = "塑胶原料";
    this.getPlasticList();
    this.getRemainingNumber();
    // this.searchoptions = this.$cookies.get("searchlist")?this.$cookies.get("searchlist"):[];
  },
  mounted() {
    this.searchoptions = this.loadAll();
  },
  methods: {
    querySearch(queryString, cb) {
      if(this.searchoptions) {
        var restaurants = this.searchoptions;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      }
    },
    loadAll() {
        var list = []
        if(this.$cookies.get("searchlist")) {
          list = JSON.parse(this.$cookies.get("searchlist"))
        }
        return list
    },
     createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    // 页面切换
    handleCurrentChange(value) {
      this.pageNo = value;
      this.getPlasticList();
      // this.clickAll = false;
      this.showBatch = false;
      this.showAllBtn = true;

    },

    // 显示弹窗
    showPop(batch, operateType, id) {
      // console.log("batch", batch);
      let ids = [];
      this.popType = operateType;
      // this.dialogShow = true;

      if (batch) {
        var flag = this.tableData.some((item1) => item1.check);
        if (flag) {
          for (let item of this.tableData) {
            if (item.check) {
              ids.push(item.id);
            }
          }
          this.ids = ids;
          this.dialogShow = true;
        } else {
          this.$message.error("请先选择要操作的选项");
        }
      } else {
        this.ids = [id];
        this.dialogShow = true;
      }
    },
    // 弹窗取消
    dialogCancel() {
      this.index = -1;
      this.popType = -1;
      this.dialogShow = false;
      this.ids = [];
    },
    // 弹窗确定
    dialogConfirm() {
      if (this.popType == 0) {
        // 删除
        this.deletePlasticRawMaterial();
      } else if (this.popType == 1) {
        // 下架
        this.takeDown();
      }
      // else {
      //   // 更新
      //   this.updateRecord();
      // }
      this.dialogCancel();
    },
    // 修改价格
    changePrice(index, $event) {
      this.priceObj[this.tableData[index].id] = $event.srcElement.value;
    },

    // 修改数量
    changeNumber(index, $event) {
      this.numberObj[this.tableData[index].id] = $event.srcElement.value;
    },

    // 单独选中某项
    check(item) {
      item.check = !item.check;
      // console.log("item.check", item.check);

      if (item.check) {
        this.operations.push({
          id: item.id,
          price: item.price,
          number: item.number,
          plasticRawMaterialId: item.plasticRawMaterialId,
          type: item.type,
        });
        // this.operations有数据且 操作是取消勾选
      } else if (this.operations.length > 0 && !item.check) {
        let result = this.operations.findIndex((oper) => oper.id == item.id);
        if (result !== -1) {
          this.operations.splice(result, 1);
        }
      }

      // some--检查是否全选
      let flag = this.tableData.some((item1) => !item1.check);

      if (flag) {
        this.isRed = true;
        this.showBatch = true;
        this.showAllBtn = true;
      }
      this.clickAll = !flag;

      // every--检查是否全不选
      let anyClick = this.tableData.every((item2) => !item2.check);
      if (anyClick == false) {
        this.isRed = true;
        this.showBatch = true;
        this.showAllBtn = true;
      } else if (anyClick == true) {
        this.isRed = false;
        this.showBatch = false;
        this.showAllBtn = true;
        this.operations = [];
      }

      if (this.tableData.length == 1 && this.clickAll == false) {
        this.isRed = false;
        this.showBatch = false;
        this.showAllBtn = true;
      } else if (this.tableData.length == 1 && this.clickAll == true) {
        this.isRed = true;
        this.showBatch = true;
        this.showAllBtn = true;
      }
    },

    // 点击全选
    clickAllItem() {
      let flag = this.tableData.some((item1) => !item1.check);

      if (flag) {
        this.clickAll = true;
        this.showBatch = true;
        this.showAllBtn = false;

        const group = []
        for (let item of this.tableData){
          if(this.operations.findIndex(operation => operation.id == item.id) == -1){
              group.push({
              id: item.id,
              price: item.price,
              number: item.number,
              plasticRawMaterialId: item.plasticRawMaterialId,
              type: item.type,
            })
          }
        }

        this.operations.push(...group)
        // console.log("this.operations", this.operations);
      } else {
        this.clickAll = false;
        this.showBatch = false;
        this.showAllBtn = true;
        this.operations = [];
      }

      for (let item of this.tableData) {
        item.check = this.clickAll;
        if (this.clickAll == true) {
          this.isRed = true;
        } else {
          this.isRed = false;
        }
      }
    },

    // 点击批量操作
    batchOperation() {
      this.showCheck = true;
      this.showBatch = true;
      this.showAllBtn = false;
    },

    // 取消
    cancel() {
      this.showBatch = false;
      this.showAllBtn = true;
      this.isRed = false;
      this.operations = [];
      this.priceObj = {};
      this.numberObj = {};

      this.clickAll = false;
      for (let item of this.tableData) {
        item.check = this.clickAll;
        if (this.clickAll == true) {
          this.isRed = true;
        } else {
          this.isRed = false;
        }
      }
    },

    showBtn(index) {
      this.tableData[index].show = true;
    },
    hideBtn(index) {
      this.tableData[index].show = false;
    },

    goEdit(id, disabled) {
      this.$router.push({
        name: "issue_supply",
        params: {
          id: id,
          disabled: disabled,
        },
      });
    },

    // 开通会员
    async openMember() {
      this.chargeDialog = true;
      let params = {
        orderIdOrSN: "1",
        payType: "WXNATIVE",
        tradeType: "NATIVE",
      };
      if (this.userInfo.hasSupplierInformation == 1) {
        let res = await this.$apiFun.openMember(params);
        this.codeUrl = res.result;
        // this.payReturn()
      } else {
        this.$message({
          type: "error",
          message: "当前您还没入驻供应商，请先入驻供应商",
          duration: 1500,
        });
        this.chargeDialog = false;

        setTimeout(() => {
          this.$router.push("supplier_enter");
        }, 2000);
      }
    },

    // 查询
    inquire() {
      this.clickAll = false;
      this.showBatch = false;
      this.pageNo = 1;
      var list = this.searchoptions
      if(this.input !== '') {
        var obj = {
          value: this.input,
          label: this.input
        }
        list.push(obj)
       for(let i = 0;i < list.length;i++){
          for(let j = i + 1;j < list.length;j++){
            if(list[i].value == list[j].value){
              list.splice(j,1)
              j--
            }
          }
        }
        this.searchoptions = list
        this.$cookies.set("searchlist",JSON.stringify(list));
      }
      this.getPlasticList();
    },

    // 接口请求
    // 产品列表
    async getPlasticList() {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        condition: this.input,
        status: 1,
      };
      if (this.form.kind == "塑胶原料") {
        params.type = "PLASTIC";
      } else if (this.form.kind == "改性塑料") {
        params.type = "MODIFIED";
      } else if (this.form.kind == "再生塑料") {
        params.type = "REGENERATION";
      } else if (this.form.kind == "塑料助剂") {
        params.type = "ADJUVANT";
      } else if (this.form.kind == "塑料机械") {
        params.type = "MECHANICAL";
      }

      let res = await this.$apiFun.getPlasticList(params);
      let date1 = new Date().getTime();

      this.tableData = res.result.rows.map((row) => {
        let date = new Date(row.updateTime).getTime();
        let minuteValue = parseInt((date1 - date) / 1000 / 60);
        let hourValue = parseInt(minuteValue / 60);
        let dateValue = parseInt(hourValue / 24);

        let greencode = false;

        let mistiming = "";
        if (dateValue > 0) {
          mistiming = row.updateTime.substr(0, 10);
          greencode = false;
        } else if (hourValue > 0) {
          mistiming = hourValue + "小时前";
          greencode = true;
        } else if (minuteValue > 0) {
          mistiming = minuteValue + "分钟前";
          greencode = true;
        } else {
          mistiming = "刚刚";
          greencode = true;
        }

        return {
          ...row,
          check: false,
          show: false,
          mistiming,
          isGreen: greencode,
        };
      });

      this.total = Number(res.result.total);

      // 切换页面时，之前打勾的保留勾选状态
      let IndexList = [];

      let isAllcheck = this.tableData.length == 0 ? false : true
      for(let num in this.tableData){
        for(let i =0;i<this.operations.length;i++){
          if(this.tableData[num].id == this.operations[i].id){
            IndexList.push(num)
            this.tableData[num].check = true
            this.showBatch = true;
          }
        }
        if (!this.tableData[num].check){
          isAllcheck = false
        }
      }
      this.clickAll = isAllcheck

      
    },
    // 剩余可发布数
    async getRemainingNumber() {
      let info = JSON.parse(sessionStorage.getItem("userInfo"));
      this.userInfo = info;
      let res = await this.$apiFun.getRemainingNumber({
        memberId: info.id,
        status: 1,
      });
      this.pmInfo = res.result;
      this.memberList = [
        { num: this.pmInfo.countTwo, name: "已发布产品" },
        { num: this.pmInfo.counThree, name: "未发布产品" },
        // { num: "0", name: "已拒审产品" },
      ];
      // if (info.identityType < 3) {
      //   this.memberList.unshift({ num: this.pmInfo.countOne, name: "剩余可发布数" });
      // }
    },
    // 删除
    async deletePlasticRawMaterial() {
      const beforeLength = this.tableData.length;
      const afterLength = this.ids.length;
      let id = this.ids.toString();
      let type = this.ids.length > 1 ? 0 : 1;
      let methods = {
        0: "deleteBatch",
        1: "deletePlasticRawMaterial",
      };
      const method = methods[type];

      let res = await this.$apiFun[method]({ id });
      if (res.code == 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: "删除成功",
        });
        if (beforeLength - afterLength <= 0) {
          this.pageNo == 1 ? 1 : (this.pageNo -= 1);
        }
        this.getPlasticList();
        this.getRemainingNumber();
        this.clickAll = false;
        this.showBatch = false;
      } else {
        this.$message({
          type: "error",
          duration: 1500,
          message: "删除失败",
        });
      }
    },
    // 下架
    async takeDown() {
      const beforeLength = this.tableData.length;
      const afterLength = this.ids.length;
      let id = this.ids.toString();
      let type = this.ids.length > 1 ? 0 : 1;
      let methods = {
        0: "setStatusBatch",
        1: "takeDown",
      };
      const method = methods[type];
      let res = await this.$apiFun[method]({ id, status: 0 });
      if (res.code == 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: "下架成功",
        });
        this.offDialog = false;

        if (beforeLength - afterLength <= 0) {
          this.pageNo == 1 ? 1 : (this.pageNo -= 1);
        }

        this.getPlasticList();
        this.getRemainingNumber();
        this.clickAll = false;
        this.showBatch = false;
      } else {
        this.$message({
          type: "error",
          duration: 1500,
          message: "下架失败",
        });
      }
    },
    // 更新
    // async updateRecord() {
    //   let plasticRawMaterialId = this.ids.toString();
    //   let type = this.ids.length > 1 ? 0 : 1;

    //   let methods = {
    //     0: "addBatch",
    //     1: "updateRecord",
    //   };
    //   const method = methods[type];
    //   let res = await this.$apiFun[method]({ plasticRawMaterialId });
    //   if (res.code == 200) {
    //     this.$message({
    //       type: "success",
    //       duration: 1500,
    //       message: "更新成功",
    //     });
    //     this.updateDialog = false;
    //     this.getPlasticList();
    //   } else {
    //     this.$message({
    //       type: "success",
    //       duration: 1500,
    //       message: "更新失败",
    //     });
    //   }
    // },

    // 单独更新
    async singleUpdate(index) {
      // 判断十分钟内有没有重复更新
      let params = {
        memberId: this.userInfo.id,
        plasticRawMaterialId: this.tableData[index].id,
      };
      let res = await this.$apiFun.updateRecord(params);
      if (res.code == 200) {
        // 点击批量更新保存编辑后的价格和数量
        let params = {
          id: this.tableData[index].id,
          price: this.tableData[index].price,
          number: this.tableData[index].number,
        };
        if (this.form.kind == "塑胶原料") {
          params.type = "PLASTIC";
        } else if (this.form.kind == "改性塑料") {
          params.type = "MODIFIED";
        } else if (this.form.kind == "再生塑料") {
          params.type = "REGENERATION";
        } else if (this.form.kind == "塑料助剂") {
          params.type = "ADJUVANT";
        } else if (this.form.kind == "塑料机械") {
          params.type = "MECHANICAL";
        }
        let res = await this.$apiFun.releaseSupply(params);
        if (res.code == 200) {
          this.$message({
            type: "success",
            duration: 1500,
            message: "更新成功",
          });
          this.getPlasticList();
        }
      } else {
        if (this.userInfo.identityType == 2) {
          this.$message.error("只有优塑会员才能使用一键更新功能!");
        } else {
          this.$message.error("同一个供应信息十分钟内只能更新一次");
        }
      }
    },

    // 批量更新
    massUpdate() {
      console.log("批量更新this.operations", this.operations);
      if (this.operations.length == 0) {
        this.$message.error("请先选择要操作的选项");
      } else {
        for (let index in this.operations) {
          let table = this.operations[index];
          if (this.priceObj[table.id]) {
            this.operations[index].price = this.priceObj[table.id];
          }
          if (this.numberObj[table.id]) {
            this.operations[index].number = this.numberObj[table.id];
          }

          // console.log("this.operations[index]", this.operations[index]);
        }

        this.updateDialog = true;
      }
    },

    // 取消批量更新
    cancelUpdate() {
      this.updateDialog = false;
    },

    async sure() {
      // 判断十分钟内有没有重复更新
      for (let i = 0; i < this.operations.length; i++) {
        let params = {
          memberId: this.userInfo.id,
          plasticRawMaterialId: this.operations[i].id,
        };
        let res = await this.$apiFun.updateRecord(params);

        // console.log("this.operations[i]", this.operations[i]);
        if (res.code == 200) {
          // 点击批量更新保存编辑后的价格和数量
          let params = {
            id: this.operations[i].id,
            price: this.operations[i].price,
            number: this.operations[i].number,
          };
          if (this.form.kind == "塑胶原料") {
            params.type = "PLASTIC";
          } else if (this.form.kind == "改性塑料") {
            params.type = "MODIFIED";
          } else if (this.form.kind == "再生塑料") {
            params.type = "REGENERATION";
          } else if (this.form.kind == "塑料助剂") {
            params.type = "ADJUVANT";
          } else if (this.form.kind == "塑料机械") {
            params.type = "MECHANICAL";
          }
          let res = await this.$apiFun.releaseSupply(params);
          if (i == this.operations.length - 1) {
            if (res.code == 200) {
              this.$message({
                type: "success",
                duration: 1500,
                message: "更新成功",
              });
              this.updateDialog = false;
              this.operations = [];
              this.priceObj = {};
              this.numberObj = {};
            }
          }
        } else {
          if (i == this.operations.length - 1) {
            if (this.userInfo.identityType == 2) {
              this.$message.error("只有优塑会员才能使用一键更新功能!");
              this.operations = [];
              this.priceObj = {};
              this.numberObj = {};
            } else {
              this.$message.error("同一个供应信息十分钟内只能更新一次");
              this.operations = [];
              this.priceObj = {};
              this.numberObj = {};
            }
          }
        }
        this.updateDialog = false;
      }
      this.getPlasticList();
      this.clickAll = false;
      this.showBatch = false;
      this.showAllBtn = true;
    },

    goToIssue() {
      this.$router.push({
        name: "issue_supply",
      });
    },
  },

  watch: {
    "$route.name": {
      handler() {
        // console.log("onlineName",this.$route.name);
        if (this.$route.name == "online_products") {
          this.pageNo = 1;
          this.input = "";
          this.getRemainingNumber();
          this.form.kind = "塑胶原料";
          this.getPlasticList();
          this.clickAll = false;
          this.showBatch = false;
          this.showAllBtn = true;
        }
      },
      // immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-divider--horizontal {
  margin: 0;
  background: #efefef;
  border-radius: 1px;
}
/deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      margin-left: 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;

      .el-button--default {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 5px;
        display: block;
      }
      .el-button--primary {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}

.bg {
  box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
  font-family: Microsoft YaHei;
  .top {
    background: #ffffff;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;

    .title {
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
      line-height: 0.3rem;
      margin-bottom: 0.35rem;
      text-align: left;
    }

    .promptBox {
      width: 75%;
      height: 1.5rem;
      background: #efefef;
      border-radius: 5px;
      padding: 0.2rem;
      .commonMember {
        p {
          font-size: 0.18rem;
          font-weight: 400;
          color: #666666;
          margin-bottom: 0.3rem;
          margin-top: 0;
          text-align: left;
          span {
            color: #3756df;
            cursor: pointer;
          }
        }

        .info {
          display: flex;
          width: 100%;
          .box {
            font-size: 0.18rem;
            text-align: center;
            width: 25%;
            color: #333333;
            .num {
              font-weight: bold;
            }
            .name {
              font-weight: 400;
              margin-top: 0.2rem;
            }
          }
        }
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      font-size: 0.18rem;
      font-weight: 400;
      color: #666666;
      .xgimage {
        width: 0.28rem;
        height: 0.28rem;
      }
      p {
        span {
          color: #3756df;
          cursor: pointer;
        }
      }
    }
  }

  .content {
    margin-top: 0.2rem;
    background: #ffffff;
    padding: 0.3rem 0;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    .nav {
      display: flex;
      justify-content: space-between;
      width: 90%;
      margin: 0 4%;
      align-items: flex-start;
      .left {
        display: flex;
        width: 25%;
        height: 0.4rem;
        align-items: center;

        /deep/ .el-input {
          width: 100%;
          height: 0.4rem;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          .el-input__inner {
            padding: 0 0 0 0.15rem;
            // border-top-right-radius: 0;
            // border-bottom-right-radius: 0;
            height: 0.4rem;
            line-height: 0.4rem;
            border: 1px solid #000;
          }
          .el-input__inner:focus {
            border: 1px solid #f42551;
          }
        }
        .search {
          background: #f42551;
          display: flex;
          align-items: center;
          cursor: pointer;
          border-radius: 0px 5px 5px 0px;
          height: 0.4rem;
          line-height: 0.4rem;

          .iamge {
            width: 0.28rem;
            height: 0.28rem;
            margin-left: 0.06rem;
          }
          .text {
            font-size: 0.18rem;
            font-weight: bold;
            color: #ffffff;
            margin-right: 0.09rem;
          }
        }
      }
      .middle {
        display: flex;
        margin-left: 0.2rem;
        height: 0.4rem;
        // 选择区域样式
        /deep/ .el-form {
          height: 0.4rem;
          display: flex;
          justify-content: space-around;
          // align-items: center;

          .el-form-item {
            width: 2rem;
            height: 0.4rem;
            margin-bottom: 0;

            .el-form-item__label {
              text-align: center;
              width: 0.5rem !important;
              font-size: 0.18rem;
              font-weight: bold;
              color: #333333;
              padding: 0;
              // padding: 0 0.28rem 0 0;
            }
            .el-form-item__content {
              width: 62%;
              margin-left: 0 !important;
              display: flex;
              .el-select {
                width: 100%;
                .el-input {
                  width: 100%;
                  height: 0.4rem;
                  line-height: 0.4rem;
                  .el-input__inner {
                    height: 100%;
                  }
                  .el-select__caret {
                    line-height: 0.4rem;
                  }
                }
              }
            }
          }

          .el-form-item:nth-child(2) {
            width: 0.75rem;
            height: 0.4rem;
          }
          .el-button--default {
            width: 0.75rem;
            height: 0.4rem;
            line-height: 0.1rem;
            background: #f42551;
            border: none;
            border-radius: 5px;
            font-size: 0.18rem;
            font-weight: bold;
            color: #ffffff;
          }
        }
      }

      .right {
        width: 52%;
        display: flex;
        justify-content: space-between;
        .batch {
          width: 75%;
          display: flex;

          .large {
            width: 100%;
            display: flex;
            justify-content: space-around;

            .batchOfflone,
            .batchUpdate,
            .batchDel {
              display: flex;
              align-items: center;
              font-size: 0.18rem;
              font-weight: 400;
              color: #000;
              cursor: pointer;
              img {
                width: 0.28rem;
                height: 0.28rem;
              }
            }

            .isRedClass {
              color: #f42551;
            }
          }
        }

        .button {
          width: 1rem;
          height: 0.4rem;
          background: #f42551;
          border-radius: 5px;
          font-size: 0.18rem;
          font-weight: bold;
          color: #ffffff;
          border: none;
          cursor: pointer;
        }
      }
    }

    // 列表
    .pushList {
      height: 7rem;
      .apply_table {
        margin-top: 0.4rem;
        .apply_table_column {
          height: 0.6rem;
          line-height: 0.6rem;
          background: #efefef;
          padding: 0 1% 0 4%;
          display: flex;
          font-size: 0.16rem;
          font-weight: bold;
          color: #333333;
          text-align: center;

          .checkAll {
            width: 0.58rem;
            input[type="checkbox"] {
              margin: 0 0.02rem;
            }
          }
          .apply_table_title {
            width: 0.92rem;
          }
          .apply_table_title:nth-child(2),
          .apply_table_title:nth-child(7),
          .apply_table_title:nth-child(8) {
            width: 0.7rem;
          }

          .apply_table_title:nth-child(3) {
            width: 1.6rem;
          }
          .apply_table_title:nth-child(4) {
            width: 1rem;
          }
          .apply_table_title:nth-child(5) {
            width: 1.4rem;
          }
          .apply_table_title:last-child {
            // width: 1.95rem;
            flex: 1;
          }
        }
        .result {
          .apply_table_info {
            width: 95.5%;
            margin: 0 1% 0 3.5%;
            .apply_info_box {
              height: 0.6rem;
              line-height: 0.6rem;
              display: flex;
              position: relative;
              padding-left: 0.7%;
              align-items: center;
              .check {
                width: 3%;
                margin-right: 2.5%;
                input[type="checkbox"] {
                  display: block;
                }
              }

              .apply_info_text {
                width: 0.92rem;
                font-size: 0.16rem;
                font-weight: 400;
                color: #333333;
                line-height: 0.3rem;
                text-align: center;
                &.isGreenclass {
                  color: green;
                }
              }

              .apply_info_text:nth-child(2),
              .apply_info_text:nth-child(7),
              .apply_info_text:nth-child(8) {
                width: 0.7rem;
              }

              .apply_info_text:nth-child(3) {
                width: 1.6rem;
              }
              .apply_info_text:nth-child(4)
              {
                width: 1rem;
              }

              .apply_info_text:nth-child(5) {
                width: 1.4rem;
              }

              .input {
                width: 47%;
                height: 0.3rem;
                padding: 0;
                border: 1px solid #cccccc;
                border-radius: 5px;
                outline: none;
                background: transparent;
                font-size: 0.16rem;
                font-weight: 400;
                color: #333333;
                line-height: 0.3rem;
                text-align: center;
              }

              .isSelect {
                border: 1px solid transparent;
              }

              .apply_info_btn {
                // width: 1.9472rem;
                height: 0.6rem;
                display: flex;
                justify-content: space-between;
                flex: 1;
                div {
                  width: 100%;
                  display: flex;
                  .showbtn {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    .btn {
                      background: none;
                      border: none;
                      font-size: 0.16rem;
                      font-weight: bold;
                      cursor: pointer;

                      padding: 0.01rem 0.04rem;
                      border-radius: 0.05rem;
                    }
                    .btn_offline,
                    .btn_edit,
                    .btn_update {
                      color: #333333;
                      border: 1px solid #000;
                    }

                    .btn_del {
                      color: #f42551;
                      border: 1px solid rgb(255, 73, 64);
                    }
                  }
                }
              }
            }
            .isGrayClass {
              background: #efefef;
              border-radius: 10px;
            }
          }
        }
        .noResult {
          margin-top: 1rem;
          font-size: 0.18rem;
          .issueButton {
            width: 1rem;
            height: 0.4rem;
            background: #f42551;
            border-radius: 5px;
            font-size: 0.18rem;
            font-weight: bold;
            color: #ffffff;
            border: none;
            cursor: pointer;
          }
        }
      }
    }

    // 列表页
    /deep/ .el-pagination {
      position: relative;
      top: 0;
      text-align: left;
      padding-left: 0.3rem;
      display: flex;
    }
  }

  .del_dialog {
    /deep/.el-dialog {
      .el-dialog__body {
        text-align: center;
        span {
          font-size: 0.2rem;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  .chargeDialog {
    font-family: Microsoft YaHei;
    /deep/ .el-dialog__header {
      .el-dialog__title {
        width: 100%;
        margin-left: 0;
        text-align: center;
      }
    }
    /deep/ .el-dialog__body {
      padding: 0.2rem 0.35rem 0.3rem;
      font-size: 0.2rem;
      text-align: center;
      font-weight: 400;
      color: #333333;
      .qrcode {
        width: 1.8rem;
        height: 1.8rem;
      }
    }
  }
}

// 分页样式
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f42551;
}
</style>